<!--这个是第一个版本的登录页面，已经废弃，先留着防止ui再改回来，时间长了可以删掉  2019.8.6-->
<template>
    <div class="login">
        <span class="login-page-close">×</span>
        <div class="login-header-wrap positionR">
            <img class="login-header-img" src="../../../static/develop/images/login/header.png" alt="">
            <ul class="login-tap-wrap">
                <li class="login-tap" @click="isActive = true" :class="{'active':isActive}">微信登录</li>
                <li class="login-tap" @click="isActive = false" :class="{'active':!isActive}">手机登录</li>
            </ul>
        </div>
        <div class="login-form">
            <div><img class="top-assass" :style="{'left':isActive ? '.28rem' : '1.32rem'}" src="../../assets/images/login/top_assass.png" alt=""></div>
            <div class="content">
                <p class="login-title">欢迎使用好看好玩！</p>
                <div class>
                    <div class="positionR" v-show="isActive">
                        <button class="button" @click="wxLogin">微信登录领取现金红包</button>
                        <lottie :options="defaultOptions" :height="200" :width="200" v-on:animCreated="handleAnimation" />
                    </div>
                    <div v-show="!isActive">
                        <div class="check-phone-warp displayFlex flexCenter">
                            <phone-check-bottom-line :porpsContent="{'isShowRedWarn':false,'isShowToastWarn':false}" @changeCheck="phoneCheckFn"></phone-check-bottom-line>
                            <span v-if="!passwordLogin" class="get-code" :class="{'disabled':!isCanGetCode}" @click="getCode">{{getCodeText}}</span>
                        </div>
                        <four-code v-if="!passwordLogin" @checkCode="checkCodeFn"></four-code>
                        <span v-else class="displayFlex password-input-wrap" >
                            <span class="password-winput">
                                <!--<input class="password-input" placeholder="请输入6-20位密码" :type="seePW ? 'text' : 'password'" />-->
                                <check-password @checkPassword="checkPasswordFn"  :propsContent="checkPassword"></check-password>
                            </span>
                            <span class="fr">
                                <span class="iconfont icon-yanjing pw-eye" @click="showPw()" :class="{active:seePW}"></span>
                                <span class="forget-password" @click="forgetPW">忘记密码</span>
                            </span>
                        </span>
                        <div>
                            <button class="button" @click="login" :class="{'disabled': !isCanSubmit}">{{passwordLogin ? "密码登录" : "验证码登录"}}</button>
                            <p class="bottom-login-text" @click="tapLoginWay">{{!passwordLogin ? "密码登录" : "验证码登录"}}</p>
                        </div>
                    </div>
                </div>
            </div>
            <p class="user-agreement-text">登录即同意接受 <router-link to="/userAgreement">用户协议</router-link></p>
        </div>
        <transition name="reset" enter-active-class="animated slideUp" leaver-active-class="animated slideDown">
            <reset-password class="reset-password-component" @closeReset="closeReset" :class="{'show-reset-pw':resetPw}" v-if="resetPw"></reset-password>
        </transition>
    </div>
</template>
<script>
    import xtoken from '../../x/xtoken';
    import animationData from '../../assets/json/redGif';
    import XThirdLogin from '../../x/XThirdLogin';
    import lottie from 'vue-lottie';

    export default {
        name: "login",
        data(){
            return{
                seePW:false,
                isActive:false,
                isDisabled:true,
                passwordLogin:false,
                resetPw:false,
                checkPassword:{},
                defaultOptions: { animationData: animationData },
                animationSpeed: 1,
                anim: {},
                isCanGetCode:false,
                isCanSubmit:false,
                getCodeText:'获取验证码',
                getCodeTime:-1,
                getCodeTimer:'',
                phoneObj:{phoneTrue:false,phoneNum:''},
                codeObj:{codeTrue:false,code:null},
                passwordObj:{passwordTrue:false,password:null},
            }
        },
        mounted(){

        },
        methods:{
            closeReset(){
                this.resetPw = false;
            },
            showPw(){
                let that = this;
                that.seePW = !that.seePW;
                let canSeeObj = {canSee:that.seePW};
                that.checkPassword = Object.assign({},that.checkPassword,canSeeObj);
            },
            handleAnimation(anim) {
                this.anim = anim;
            },
            phoneCheckFn(obj){
                if(obj.phoneTrue && this.getCodeText == '获取验证码'){
                    this.isCanGetCode = true;
                }
                this.phoneObj = Object.assign({},this.phoneObj,obj);
                this.checkIsCanSubmit();
            },
            checkCodeFn(obj){
                this.codeObj = Object.assign({},this.codeObj,obj);
                this.checkIsCanSubmit();
            },
            checkPasswordFn(obj){
                this.passwordObj = Object.assign({},this.passwordObj,obj);
                this.checkIsCanSubmit();
            },
            checkIsCanSubmit(){
                if( this.phoneObj.phoneTrue && (this.codeObj.codeTrue || this.passwordObj.passwordTrue) ){
                    this.isCanSubmit = true;
                }else{
                    this.isCanSubmit = false;
                }
            },
            login(){
                let url = '';
                let paramas = {};
                let that = this;
                if(this.passwordLogin){
                    url = `${this.NW_API_API_LOCALE_VERSION}/user/account/password/login `;
                    paramas = {
                        "phone":that.phoneObj.phoneNum,
                        "password":that.passwordObj.password,
                        "deviceType": "H5",
                        "terminalType": "CustomerH5",
                        "deviceId": xtoken.getDeviceId() ,
                    }
                }else{
                    url = `${this.NW_API_API_LOCALE_VERSION}/user/account/code/login`;
                    paramas = {
                        "phone":that.phoneObj.phoneNum,
                        "thirdId":null,
                        "authCode":that.codeObj.code,
                        "deviceType": "H5",
                        "terminalType": "CustomerH5",
                        "deviceId": xtoken.getDeviceId(),
                    }
                }
                this.xurl.postDataJsonLoading(url,paramas,false).then((data)=>{
                    if(data.success){
                        let nextPage = window.localStorage.getItem(this.NEXTPAGE) || '';
                        this.$store.dispatch('updateCurrentUser',data.result);
                        if(nextPage){
                            window.location.href = nextPage;
                        }else{
                            this.$router.push({path:'/home'})
                        }
                    }else{
                        this.$root.$emit("toast",{msg:"登录失败，请重新登录"});
                    }
                })
            },
            wxLogin(){
                /*TODO 后台暂时没有开发，待接口重新出来再做*/
                this.$root.$emit("toast",{msg:"请使用密码或者验证码登录"})
                // let url = `${this.NW_API_API_LOCALE_VERSION}/third/wechat/login `;
                // let paramas = {
                //     "code": "vv123",
                //     "deviceType": "H5",
                //     "deviceId": xtoken.getDeviceId(),
                // }
            },
            tapLoginWay(){
                this.passwordLogin=!this.passwordLogin;
                this.codeObj={codeTrue:false,code:null};
                this.passwordObj={passwordTrue:false,password:null};
                this.checkIsCanSubmit();
            },
            forgetPW(){
                this.resetPw = true;
                if(this.phoneObj.phoneTrue && this.getCodeText == '获取验证码'){
                    this.isCanGetCode = true;
                }
                this.checkIsCanSubmit();
            },
            /*获取验证码*/
            getCode(){
                let that = this;
                this.isCanGetCode = false;
                this.getCodeTime = 60;
                let url = `${this.NW_API}/api/send/code/phone/${this.phoneObj.phoneNum}`;
                this.xurl.post(url).then((result)=>{
                    this.$root.$emit('toast',{msg:'发送验证码成功'});
                    this.getCodeTimer = setInterval(()=>{
                        that.getCodeTime --;
                        that.getCodeText = `${that.getCodeTime}s`;
                        if(this.getCodeTime < 0){
                            that.isCanGetCode = true;
                            that.getCodeText = `获取验证码`;
                            clearInterval(that.getCodeTimer);
                        }
                    },1000);
                }).catch(()=>{
                    that.isCanGetCode = true;
                    that.getCodeText = `获取验证码`;
                })
            }
        },
        components:{
            'phone-check-bottom-line':()=>import("../../components/commonComponents/phone/PhoneCheckBottomLine"),
            'reset-password':()=>import("./ResetPw"),
            'check-password':()=>import("../../components/commonComponents/password/CheckPassword"),
            'lottie':lottie,
            'four-code':()=>import("../../components/commonComponents/codeCheck/FourCodeOneInput")
        },

    }
</script>

<style scoped lang="scss">
    @import url($css_root + 'css/login/login.css');
</style>